<template>
  <div class="my">
    <div class="header">
      <div class="img" @click="gos">
        <img src="../assets/img/user.png" alt="" />
      </div>
      <div class="word" v-show="!flag0">登录后更精彩</div>
      <div class="word" v-show="flag0">buD</div>
      <div class="right"></div>
    </div>
    <div class="nav">
      <ul>
        <li>
          <p>0</p>
          <span>积分</span>
        </li>
        <li>
          <p>0</p>
          <span>优惠券</span>
        </li>
        <router-link tag="li" to="collection">
          <p>{{likelength}}</p>
          <span>收藏</span>
        </router-link>
        <router-link tag="li" to="footprint">
          <p>{{footprintlength}}</p>
          <span>足迹</span>
        </router-link>
      </ul>
    </div>

    <!-- <div class="items">
      <div class="item">
        <div class="img">
          <img src="../assets/img/wde1.png" alt="" />
        </div>
        <div class="word">待付款</div>
      </div>
      <div class="item">
        <div class="img">
          <img src="../assets/img/wde2.png" alt="" />
        </div>
        <div class="word">待出行</div>
      </div>
      <div class="item">
        <div class="img">
          <img src="../assets/img/wde3.png" alt="" />
        </div>
        <div class="word">待评价</div>
      </div>
      <div class="item">
        <div class="img">
          <img src="../assets/img/wde4.png" alt="" />
        </div>
        <div class="word">我的订单</div>
      </div>
    </div> -->

    <div class="bg">
      <div class="img">
        <img src="../assets/img/wodepic.png" alt="" />
      </div>
    </div>

    <div class="title">常用工具</div>

    <div class="tool">
            <div class="itemz">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    易起购订单
                </p>
            </div>
            <div class="itemz">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    常用信息
                </p>
            </div>
            <div class="itemz">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    发票申请
                </p>
            </div>
            <div class="itemz">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    我的定制
                </p>
            </div>
            <div class="itemz">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    我的权益
                </p>
            </div>
            <div class="itemz">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    旅游顾问
                </p>
            </div>
            <div class="itemz">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    积分商城
                </p>
            </div>
            <div class="itemz">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    积分钱包
                </p>
            </div>
            <div class="itemz">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    门店查询
                </p>
            </div>

        </div>
        <div class="title">
            推荐服务
        </div>

        <div class="tool">
            <div class="itemw">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    企业客户
                </p>
            </div>
            <div class="itemw">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    旅游积分卡
                </p>
            </div>
            <div class="itemw">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    外币兑换
                </p>
            </div>
            <div class="itemw">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    意见反馈
                </p>
            </div>
            <div class="itemw">
                <div class="img">
                    <span></span>
                </div>
                <p>
                    我的礼品
                </p>
            </div>
        </div>

    <div class="bottom">
      <div class="low" @click="esc" v-show="flag0">
        退出登录
      </div>
    </div>


    <footer>
      <ul>
        <router-link tag="li" to="/home" >
          <div class="img"></div>
          <p class="word">首页</p>
        </router-link>
        <router-link tag="li" to="/trip">
          <div class="img"></div>
          <p class="word">行程</p>
        </router-link>
        <router-link tag="li" to="/payment">
          <div class="img"></div>
          <p class="word">支付</p>
        </router-link>
        <router-link tag="li" to="/my" class="con">
          <div class="img"></div>
          <p class="word">我的</p>
        </router-link>
      </ul>
    </footer>
  </div>
</template>

<script>
export default {
  props:['CoList'],
  data() {
    return {
      flag0: false,
      footprint:[],
      footprintlength:null,
      like:[],
      likelength:null,
    };
  },
  methods:{
    //登录
    gos(){
      if(!window.localStorage.getItem("token")){
        this.$router.push('/login');
      }
      // window.localStorage.setItem('login',this.flag0);
    },
    //退出登录
    esc(){
      window.localStorage.clear();
      this.$toast('退出成功');
      this.flag0 = false;
    }
  },
  created(){
    if(window.localStorage.getItem("token")){
      this.flag0 = true;
    }else{
      this.flag0 = false;
    }

    if(window.localStorage.getItem("footprint")){
      this.footprint = JSON.parse(window.localStorage.getItem("footprint"));
    this.footprintlength = this.footprint.length;
    }else{
      this.footprintlength = 0;
    }

    console.log(this.CoList);
    this.like = this.CoList.filter(item=>item.like);
    this.likelength = this.like.length;
  },
  mounted(){
    // this.flag0 = window.localStorage.getItem('login')?true:false;
    // console.log(this.flag0);
  }
};
</script>

<style lang="scss" scoped>
.my {
  .header {
    display: flex;
    padding-top: 40px;
    height: 64px;
    padding: 40px 20px;
    .img {
      width: 64px;
      height: 64px;
      img {
        width: 100%;
      }
    }
    .word {
      height: 64px;
      line-height: 64px;
      flex: 1;
      font-size: 24px;
      color: #333;
      font-weight: 700;
      margin-left: 16px;
    }
  }
  .nav {
    padding: 0 20px;
    border-bottom: 10px solid #f5f5f5;
    ul {
      display: flex;
      padding-bottom: 19px;
      li {
        width: 25%;
        display: flex;
        align-items: center;
        flex-direction: column;
        p {
          font-weight: bold;
        }
        span {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
  .items {
    display: flex;
    .item {
      width: 25%;
      padding: 17px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .img{
        width: 23px;
        height: 23px;
        img{
          width: 100%;
        }
      }
      .word {
        margin-top: 6px;
        font-size: 12px;
        color: #333;
      }
    }
  }
  .bg {
    background: #f5f5f5;
    .img {
      img {
        width: 100%;
      }
    }
  }
  .title {
    height: 22px;
    padding: 10px 0 10px 20px;
    font-weight: bold;
  }
  .tool {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 10px solid #f5f5f5;
  .itemz {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    .img {
      span {
        display: block;
        width: 26px;
        height: 26px;
        background: url(../assets/img/sprite.png)no-repeat -198px -377px;
        background-size: 490px;
      }
    }
    &:nth-child(2) {
      .img {
        span {
          background-position: -355px -377px;
        }
      }
    }
    &:nth-child(3) {
      .img {
        span {
          background-position: -388px -377px;
        }
      }
    }
    &:nth-child(4) {
      .img {
        span {
          background-position: -165px -377px;
        }
      }
    }
    &:nth-child(5) {
      .img {
        span {
          background-position: -33px -411px;
        }
      }
    }
    &:nth-child(6) {
      .img {
        span {
          background-position: -102px -377px;
        }
      }
    }
    &:nth-child(7) {
      .img {
        span {
          background-position: -65px -411px;
        }
      }
    }
    &:nth-child(8) {
      .img {
        span {
          background-position: -128px -411px;
        }
      }
    }
    &:nth-child(9) {
      .img {
        span {
          background-position: -65px -411px;
        }
      }
    }
    p {
      text-align: center;
      font-size: 12px;
      color: #333;
      padding: 10px 0;
    }
  }
  .itemw {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    .img {
      span {
        display: block;
        width: 26px;
        height: 26px;
        background: url(../assets/img/sprite.png)no-repeat -228px -377px;
        background-size: 490px;
      }
    }
    &:nth-child(2) {
      .img {
        span {
          background-position: -132px -377px;
        }
      }
    }
    &:nth-child(3) {
      .img {
        span {
          background-position: -259px -377px;
        }
      }
    }
    &:nth-child(4) {
      .img {
        span {
          background-position: -323px -377px;
        }
      }
    }
    &:nth-child(5) {
      .img {
        span {
          background-position: -69px -377px;
        }
      }
    }
    p {
      text-align: center;
      font-size: 12px;
      color: #333;
      padding: 10px 0;
    }
  }
}

  .bottom {
    padding-bottom: 65px;
    padding-top: 15px;
    .low{
      background: #51a6fb;
      text-align: center;
      height: 40px;
      line-height: 40px;
      margin: 10px 64px;
      color: #fff;
      border-radius: 28px;
    }
  }
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    ul {
      display: flex;
      li {
        width: 25%;
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 12px;
        color: #707070;
        &.con {
          .word {
            color: #242424;
          }
        }
        .img {
          width: 26px;
          height: 26px;
          background: url(../assets/img/common.png) no-repeat -115px -243px;
          background-size: 400px;
        }
        &:nth-of-type(2) {
          .img {
            background-position: -153px -243px;
          }
        }
        &:nth-of-type(3) {
          .img {
            background-position: -191px -243px;
          }
        }
        &:nth-of-type(4) {
          .img {
            background-position: -227px -280px;
          }
        }
      }
    }
  }
}
</style>
